@import (reference) 'icons';
@import (reference) 'config';

.try-desktop-modal {
  padding-top: 40px;

  &__icon {
    width: 100%;
    height: 80px;
    background: @modal-try-desktop-icon no-repeat center bottom;
  }

  &__title {
    font-weight: normal;
  }

  &__center {
    text-align: center;
  }

  &__label {
    display: inline-block;
    vertical-align: top;
    margin: 0;
  }

  &__flex {
    display: flex;
    label {
      flex-grow: 1;
    }
  }
}

@media screen and (max-width: 480px) {
  .try-desktop-modal {
    .buttons-wrapper {
      flex-direction: column;
    }

    &__button {
      min-width: 100%;
      margin-bottom: 10px;
    }
  }
}
